<template>
  <div class="animate__fadeIn animate__zoomOutDown">
    <div
      class="full"
      :style="{
        'background-image': `url(${playMusic.picUrl})`,
        'background-size': `auto 100%`,
        'background-origin': 'center center',
        filter: 'blur(30px)',
      }"
    ></div>
    <!-- timeprocess -->
    <div class="fullscreen">
      <h1>
        <i
          class="fa fa-compress"
          aria-hidden="true"
          @click="$emit('hidefull', false)"
        ></i>
      </h1>
      <img :src="playMusic.picUrl" class="cover" />
      <div class="lyric">
        <ul :style="{ transform: `translateY(-${lyricIndex * 21}px)` }">
          <li
            v-for="(ly, index) in lyricArray"
            :key="index"
            :class="{ active: index == lyricIndex }"
          >
            {{ ly.lyric }}
          </li>
        </ul>
      </div>
      <div class="control">
        <input
          class="process"
          v-model="timeprocess"
          type="range"
          max="100"
          min="0"
        />
      </div>
      <div class="controls">
        <i
          @click="$emit('changeMusic', 'prev')"
          class="fa fa-step-backward"
          aria-hidden="true"
        ></i>
        <i
          :class="['fa', { 'fa-play': !playState }, { 'fa-pause': playState }]"
          @click="$emit('playpause')"
          aria-hidden="true"
        ></i>
        <i
          @click="$emit('changeMusic', 'next')"
          class="fa fa-step-forward"
          aria-hidden="true"
        ></i>
        <i class="fa fa-bars" aria-hidden="true" @click="click"></i>
      </div>
    </div>
    <div v-show="isShow" class="playL">
      <h2>歌单</h2>
      <p
        v-for="pl in playList"
        :key="pl.id"
        :class="{ active: pl.id == playMusic.id }"
        @click="$emit('changeMusic', pl)"
      >
        {{ pl.name }}
      </p>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    playMusic: Object,
    currentTime: Number,
    duration: Number,
    playState: Boolean,
    playList: Array,
  },
  data() {
    return {
      lyric: "",
      isShow: false,
    };
  },
  created() {
    this.axios.get(`/lyric?id=${this.playMusic.id}`).then((result) => {
      this.lyric = result.lrc.lyric;
    });
  },
  watch: {
    playMusic() {
      this.axios.get(`/lyric?id=${this.playMusic.id}`).then((result) => {
        this.lyric = result.lrc.lyric;
      });
    },
  },
  computed: {
    lyricArray() {
      if (this.lyric == "" || this.lyric.length < 1) return [];
      let arr = this.lyric.split("\n");
      arr.pop();
      //   console.log(arr);
      let reg = /\[(\d+):(\d+.\d+)\](.*)/;
      let lyricArr = arr.map((ly) => {
        if (reg.test(ly)) {
          return {
            time: parseInt(RegExp.$1) * 60 + parseFloat(RegExp.$2),
            lyric: RegExp.$3,
          };
        }
      });
      return lyricArr;
    },
    lyricIndex() {
      if (this.lyricArray.length < 1) return 0;
      for (let i in this.lyricArray) {
        if (i >= this.lyricArray.length - 2) {
          //   console.log("最后一个");
          return this.lyricArray.length - 1;
        } else {
          //   console.log(i,this.lyricArray[i],this.lyricArray[parsenInt(i) + 1],parseInt(i) + 1);
          if (
            this.currentTime > this.lyricArray[i].time &&
            this.lyricArray[parseInt(i) + 1].time > this.currentTime
          ) {
            return i;
          }
        }
      }
      return 1;
    },
    timeprocess: {
      get() {
        let process = (this.currentTime / this.duration) * 100;
        return process;
      },
      set(value) {
        // console.log(value);
        let ctime = (value / 100) * this.duration;
        this.$emit("changeTime", ctime);
      },
    },
  },
  methods: {
    click() {
      this.isShow = !this.isShow;
      if (this.isShow) {
        console.log("显示");
      } else {
        console.log("隐藏");
      }
    },
  },
};
</script>
<style scoped lang="less">
.full {
  position: fixed;
  z-index: 98;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  transform: scale(1.5);
  background-color: #000;
}
.fullscreen {
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  i {
    font-size: 40px;
  }
  .cover {
    display: block;
    width: 20vw;
    height: 20vw;
    border-radius: 50%;
    margin: 0 auto;
  }
  .lyric {
    height: 65vh;
    text-align: center;
    overflow: hidden;
    position: relative;
    ul {
      position: absolute;
      transition: transform 0.3s linear;
      padding: 2px 0;
      top: 0;
      left: 0;
      width: 100%;
      li {
        height: 21px;
        &.active {
          color: var(--cy-Color);
          padding: 2px 0;
          font-size: 18px;
        }
      }
    }
  }
  .control {
    display: flex;
    padding: 0px 20px;
    .process {
      z-index: 100;
      width: 80vw;
      flex: 1;
      margin: 0 auto;
      height: 5px;
    }
  }
  .controls {
    display: flex;
    padding: 5vh 10vw;
    justify-content: space-between;
    i {
      flex: 1;
      text-align: center;
      font-size: 20px;
    }
  }
}
.playL {
  position: absolute;
  overflow: auto;
  right: 0;
  color: white;
  bottom: 40px;
  width: 40vw;
  height: 35vh;
  z-index: 99;
  line-height: 20px;
  background-color: rgba(26, 26, 26, 0.767);
  padding: 5px 0;
  border: 3px ridge rgba(46, 43, 46, 0.5);
  h2 {
    text-align: center;
    font-size: 20px;
  }
  p {
    padding: 5px 0;
    &.active {
      color: var(--cy-Color);
    }
  }
}
</style>